

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>知识点-例题-技巧 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="知识点-例题-技巧">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-12-06 11:02" pubdate>
        2021年12月6日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      7.1k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      106
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">知识点-例题-技巧</h1>
            
            <div class="markdown-body">
              <h1 id="一、案例题"><a href="#一、案例题" class="headerlink" title="一、案例题"></a>一、案例题</h1><h2 id="1-对象运算操作的练习"><a href="#1-对象运算操作的练习" class="headerlink" title="1.对象运算操作的练习"></a>1.对象运算操作的练习</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log([] + []);	<span class="hljs-comment">//&quot;&quot;	[].toString()==&quot;&quot;</span><br><span class="hljs-built_in">console</span>.log(&#123;&#125; + []);	<span class="hljs-comment">//[Object Object]	&#123;&#125;.toString()==[Object Object]	</span><br><span class="hljs-built_in">console</span>.log([] == ![]);	<span class="hljs-comment">//true		</span><br><br><span class="hljs-keyword">var</span> a = [<span class="hljs-number">3</span>];<br><span class="hljs-keyword">var</span> b = [<span class="hljs-number">1</span>];<br><span class="hljs-built_in">console</span>.log(a - b);  <span class="hljs-comment">//3 - 1=2        valueOf调用失败 再调用toString方法 &quot;3&quot;-&quot;1&quot;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//比较复杂的转换</span><br><span class="hljs-built_in">console</span>.log([] == ![]);	<span class="hljs-comment">//true		</span><br><span class="hljs-comment">//1. !运算符高于 == 所以先![]后得到 false</span><br><span class="hljs-comment">//2. []==false 有false进行比较时，需要换成 数字进行比较 []==0 []转数字调用valueOf()失败再调用toString()得到&quot;&quot;</span><br><span class="hljs-comment">//3. &quot;&quot;==0   Number(&quot;&quot;)得到0</span><br><span class="hljs-comment">//0==0  true</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61279ec144eaada7394cec5c.jpg" srcset="/blog/img/loading.gif" lazyload alt="详解"></p>
<h2 id="2-完全深拷贝"><a href="#2-完全深拷贝" class="headerlink" title="2.完全深拷贝"></a>2.完全深拷贝</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">deepCopy</span>(<span class="hljs-params">obj</span>)</span>&#123;<br>       <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> obj!=<span class="hljs-string">&quot;object&quot;</span>)&#123;   <span class="hljs-comment">//注意点 null为object</span><br>           <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;不是复杂数据类型&quot;</span>);<br>           <span class="hljs-keyword">return</span> obj;<br>       &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> obj==<span class="hljs-string">&quot;object&quot;</span>)&#123;   <span class="hljs-comment">//为复杂类型 进行变量拷贝</span><br>           <span class="hljs-keyword">if</span>(obj <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>)&#123;<br>               <span class="hljs-keyword">var</span> newObj=[];     <span class="hljs-comment">//解决数组拷贝成对象的问题</span><br>           &#125;<span class="hljs-keyword">else</span>&#123;<br>               <span class="hljs-keyword">var</span> newObj=&#123;&#125;;<br>           &#125;<br>          <br>           <span class="hljs-keyword">var</span> keys=<span class="hljs-built_in">Object</span>.getOwnPropertyNames(obj);   <span class="hljs-comment">//获取所有key</span><br>           keys.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>&#123;   <span class="hljs-comment">//item为key</span><br>               <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> obj[item]!=<span class="hljs-string">&quot;object&quot;</span>)&#123;<br>                   newObj[item]=obj[item];    <span class="hljs-comment">//赋值给新对象</span><br>               &#125;<span class="hljs-keyword">else</span>&#123;   <span class="hljs-comment">//是一个引用类型就 递归调用</span><br>                   newObj[item]=deepCopy(obj[item]);<br>               &#125;<br>           &#125;)<br>           <span class="hljs-keyword">return</span> newObj<br>       &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(obj==<span class="hljs-literal">null</span>)&#123;<br>           <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>       &#125;<br>   &#125;<br></code></pre></td></tr></table></figure>

<h2 id="3-四位验证码生成"><a href="#3-四位验证码生成" class="headerlink" title="3.四位验证码生成"></a>3.四位验证码生成</h2><p>现在希望在控制台打印一个4位数随机的验证码，验证码由<code>a~z</code>的小写字母，还有<code>A-Z</code>的大写字母，还有<code>0-9</code>的数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//相当于结果是0xA1;abcD,9Dfe 等</span><br></code></pre></td></tr></table></figure>

<p><strong>常规的写法确实是没有问题的</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;</span>;<br><br><span class="hljs-keyword">var</span> codeStr = <span class="hljs-string">&quot;&quot;</span>; <span class="hljs-comment">//验证码</span><br><span class="hljs-keyword">while</span> (codeStr.length &lt; <span class="hljs-number">4</span>) &#123;<br>    <span class="hljs-comment">//验证码的长度不哆，要随机取</span><br>    <span class="hljs-keyword">var</span> num = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * str.length);<br>    <span class="hljs-comment">//这个时候的num就是一个随机的索引</span><br>    codeStr += str[num];<br>&#125;<br><span class="hljs-built_in">console</span>.log(codeStr);<br></code></pre></td></tr></table></figure>

<p>但是这么做有个问题，我们发现str的组成是写手的，很长，很麻烦</p>
<p><strong>借用<code>String.fromCharCode()</code>方法去完成</strong></p>
<p>我们知道小字字终的ascii码是97开始，大写字母的ascii是65开始，我们可以通过ascii码去生成</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//英文字母是26个</span><br><span class="hljs-keyword">var</span> arr = [];<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">26</span>; i++) &#123;<br>    <span class="hljs-comment">//大定是65开始，小写是97开始</span><br>    <span class="hljs-keyword">var</span> x1 = <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-number">97</span> + i);<br>    <span class="hljs-keyword">var</span> x2 = <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-number">65</span> + i);<br>    arr.push(x1, x2);<br>    <span class="hljs-keyword">if</span> (i &lt; <span class="hljs-number">10</span>) &#123;<br>        arr.push(i);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">var</span> str = arr.join(<span class="hljs-string">&quot;&quot;</span>);     <span class="hljs-comment">//转换成字符串</span><br><br><span class="hljs-comment">//接下来的操作过程就与之前的操作过程是一样的了</span><br><span class="hljs-keyword">var</span> codeStr = <span class="hljs-string">&quot;&quot;</span>; <span class="hljs-comment">//验证码</span><br><span class="hljs-keyword">while</span> (codeStr.length &lt; <span class="hljs-number">4</span>) &#123;<br>    <span class="hljs-comment">//验证码的长度不哆，要随机取</span><br>    <span class="hljs-keyword">var</span> num = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * str.length);<br>    <span class="hljs-comment">//这个时候的num就是一个随机的索引</span><br>    codeStr += str[num];<br>&#125;<br><span class="hljs-built_in">console</span>.log(codeStr);<br></code></pre></td></tr></table></figure>

<h2 id="4-约瑟夫环"><a href="#4-约瑟夫环" class="headerlink" title="4.约瑟夫环"></a>4.约瑟夫环</h2><blockquote>
<p>100个人循环报数，数到3退出，剩下的一个人是当初100个人中的第几个。</p>
</blockquote>
<p><strong>delete删除数组解法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr=[];<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> index = <span class="hljs-number">0</span>; index &lt; <span class="hljs-number">100</span>; index++) &#123;<br>    arr[index]=<span class="hljs-number">1</span>;    <span class="hljs-comment">//每个都是活人 </span><br>&#125;<br><br><span class="hljs-comment">// 数到3使用delete删除</span><br><span class="hljs-keyword">var</span> count=<span class="hljs-number">0</span>;<br><span class="hljs-keyword">while</span>(<span class="hljs-built_in">Object</span>.keys(arr).length&gt;<span class="hljs-number">1</span>)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> arr)&#123;<br>        count++;<br>        <span class="hljs-keyword">if</span>(count==<span class="hljs-number">3</span>)&#123;<br>            <span class="hljs-keyword">delete</span> arr[i]    <span class="hljs-comment">//没有队列效应  删除后key减少</span><br>            count=<span class="hljs-number">0</span>;   <span class="hljs-comment">//重置计数器重新数</span><br>        &#125;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">var</span> n=<span class="hljs-built_in">Object</span>.keys(arr)  <span class="hljs-comment">//第一轮删除后还有  67 个   获取key 被删除的无法获取key值</span><br><span class="hljs-built_in">console</span>.log(n.length);  <span class="hljs-comment">//1 </span><br><br><span class="hljs-built_in">console</span>.log(arr.length);   <span class="hljs-comment">//100 原数组的长度依然为100</span><br><span class="hljs-built_in">console</span>.log(arr.indexOf(<span class="hljs-number">1</span>));   <span class="hljs-comment">//下标为90 下标从0开始   所以1是第91个人  </span><br></code></pre></td></tr></table></figure>

<h2 id="5-拍平数组"><a href="#5-拍平数组" class="headerlink" title="5.拍平数组"></a>5.拍平数组</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a=[<span class="hljs-number">1</span>,<span class="hljs-number">23</span>,[<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,[<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]]]<br><span class="hljs-keyword">var</span> b=a.join(<span class="hljs-string">&quot;,&quot;</span>).split(<span class="hljs-string">&quot;,&quot;</span>)   <span class="hljs-comment">//拍平数组</span><br><span class="hljs-built_in">console</span>.log(b);<br><br><br><span class="hljs-comment">// 使用ES6的方法</span><br><span class="hljs-keyword">var</span> b2=a.flat(<span class="hljs-literal">Infinity</span>)   <span class="hljs-comment">//默认一层    想拍多层 则需要使用 Infinity</span><br><span class="hljs-built_in">console</span>.log(b2);    <span class="hljs-comment">//默认只拍平1层</span><br></code></pre></td></tr></table></figure>

<h2 id="6-拍平数组并求数组之中的数字和"><a href="#6-拍平数组并求数组之中的数字和" class="headerlink" title="6.拍平数组并求数组之中的数字和"></a>6.拍平数组并求数组之中的数字和</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//拍平数组 再求其中的数字和</span><br><span class="hljs-keyword">var</span> arr=[<span class="hljs-number">1</span>,<span class="hljs-number">23</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-string">&quot;r&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;2&quot;</span>,<span class="hljs-string">&quot;33&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;nn&quot;</span>,[<span class="hljs-string">&quot;1&quot;</span>,<span class="hljs-string">&quot;g&quot;</span>,<span class="hljs-string">&quot;f&quot;</span>,[<span class="hljs-string">&quot;22&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>]]]<br><br><span class="hljs-keyword">var</span> arr2=arr.flat(<span class="hljs-literal">Infinity</span>);    <span class="hljs-comment">//得到拍平后的数组</span><br><span class="hljs-built_in">console</span>.log(arr2);<br><br><span class="hljs-keyword">var</span> nums=arr2.filter(<span class="hljs-built_in">Number</span>); <span class="hljs-comment">//过滤合法数字</span><br><span class="hljs-comment">//Number(item)   NaN 为false 则不返回</span><br><span class="hljs-built_in">console</span>.log(nums);   <span class="hljs-comment">//得到所有数字</span><br><br><span class="hljs-keyword">var</span> sum=<span class="hljs-number">0</span>;<br>nums.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>&#123;<br>    sum+=<span class="hljs-built_in">Number</span>(item) <br>&#125;)<br><span class="hljs-built_in">console</span>.log(sum);  <span class="hljs-comment">//91</span><br></code></pre></td></tr></table></figure>

<p><strong>使用归并方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//拍平数组 再求其中的数字和</span><br><span class="hljs-keyword">var</span> arr=[<span class="hljs-number">1</span>,<span class="hljs-number">23</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-string">&quot;r&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;2&quot;</span>,<span class="hljs-string">&quot;33&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;nn&quot;</span>,[<span class="hljs-string">&quot;1&quot;</span>,<span class="hljs-string">&quot;g&quot;</span>,<span class="hljs-string">&quot;f&quot;</span>,[<span class="hljs-string">&quot;22&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>]]]<br><br><span class="hljs-keyword">var</span> arr2=arr.flat(<span class="hljs-literal">Infinity</span>);    <span class="hljs-comment">//得到拍平后的数组</span><br><span class="hljs-built_in">console</span>.log(arr2);<br><br><span class="hljs-comment">//使用归并方法</span><br><span class="hljs-keyword">var</span> sum=arr2.reduce(<span class="hljs-function">(<span class="hljs-params">prev,current,index,_arr</span>)=&gt;</span>&#123;<br>    <span class="hljs-comment">//有初始值 则 current从下标0开始</span><br>    <span class="hljs-keyword">var</span> num=<span class="hljs-built_in">Number</span>(current)<br>    num=num?num:<span class="hljs-number">0</span>;      <span class="hljs-comment">//NaN则为0</span><br>    <span class="hljs-keyword">return</span> prev+num<br>&#125;,<span class="hljs-number">0</span>)   <span class="hljs-comment">//给一个初始值  第一个prev为 这个 初始值</span><br><span class="hljs-built_in">console</span>.log(sum);   <span class="hljs-comment">//91</span><br></code></pre></td></tr></table></figure>

<h2 id="执行上下文相关"><a href="#执行上下文相关" class="headerlink" title="执行上下文相关"></a>执行上下文相关</h2><h3 id="1-函数作用域问题"><a href="#1-函数作用域问题" class="headerlink" title="1.函数作用域问题"></a>1.函数作用域问题</h3><blockquote>
<p> 作业域在函数创建的时候就已经 决定了， 而不是调用的时候</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> aa=<span class="hljs-number">111</span>;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-comment">//aa 没有  就往上级作用域找</span><br>    <span class="hljs-built_in">console</span>.log(aa);         <span class="hljs-comment">//函数建立的时候 作用域就已经确定了</span><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 建立阶段：</span><br><span class="hljs-comment">     *     无</span><br><span class="hljs-comment">     * 执行阶段：</span><br><span class="hljs-comment">     *     1.调用aa 没有 就向上级作用域查找</span><br><span class="hljs-comment">     */</span><br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params">fn</span>)</span>&#123;<br>   <span class="hljs-keyword">var</span> aa=<span class="hljs-number">222</span>;<br>   fn();    <span class="hljs-comment">//调用回调函数  打印111</span><br><br>   <span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 建立阶段：</span><br><span class="hljs-comment">    *  1.fn形参接收实参a</span><br><span class="hljs-comment">    *  2.上报内存 var aa</span><br><span class="hljs-comment">    * 执行阶段：</span><br><span class="hljs-comment">    *  aa赋值</span><br><span class="hljs-comment">    *  执行fn()</span><br><span class="hljs-comment">    */</span><br>&#125;<br>b(a);  <span class="hljs-comment">//调用b函数 将 a函数传入   打印111</span><br></code></pre></td></tr></table></figure>

<h3 id="2-arguments调用函数"><a href="#2-arguments调用函数" class="headerlink" title="2.arguments调用函数"></a>2.arguments调用函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> length = <span class="hljs-number">10</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FN</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.length);<br>&#125;<br><br><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">length</span>: <span class="hljs-number">5</span>,<br>    <span class="hljs-attr">method</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>&#123;<br>        fn();    <span class="hljs-comment">//打印10</span><br>        <span class="hljs-built_in">arguments</span>[<span class="hljs-number">0</span>]();    <span class="hljs-comment">//打印2  相当于 arguments.0()  此时this为arguments</span><br>    &#125;<br>&#125;<br>obj.method(FN, <span class="hljs-number">123</span>);<br></code></pre></td></tr></table></figure>

<h3 id="3-函数作业域终极题"><a href="#3-函数作业域终极题" class="headerlink" title="3.函数作业域终极题"></a>3.函数作业域终极题</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Foo</span>(<span class="hljs-params"></span>)</span>&#123;<br>    getName=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;  <span class="hljs-comment">//这个方法会升级成全局变量 </span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>);<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span><br>&#125;<br>Foo.getName=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>);<br>&#125;<br>Foo.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">3</span>);<br>&#125;<br><span class="hljs-keyword">var</span> getName=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">4</span>);<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getName</span>(<span class="hljs-params"></span>)</span>&#123;   <span class="hljs-comment">//这个被上面覆盖</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">5</span>);<br>&#125;<br><br>Foo.getName();  <span class="hljs-comment">//2</span><br>getName();  <span class="hljs-comment">//4</span><br>Foo().getName();  <span class="hljs-comment">//1 调用后覆盖原来的getName方法</span><br><br>getName();  <span class="hljs-comment">//1</span><br><br><span class="hljs-keyword">new</span> Foo.getName(); <span class="hljs-comment">//2</span><br><span class="hljs-keyword">new</span> Foo().getName();   <span class="hljs-comment">//3 先 new Foo()  </span><br><span class="hljs-keyword">new</span> <span class="hljs-keyword">new</span> Foo().getName(); <span class="hljs-comment">//3</span><br></code></pre></td></tr></table></figure>

<h2 id="7-环形进度条-圆锥渐变实现"><a href="#7-环形进度条-圆锥渐变实现" class="headerlink" title="7.环形进度条-圆锥渐变实现"></a>7.环形进度条-圆锥渐变实现</h2><blockquote>
<p>关键：</p>
<p>圆锥渐变</p>
<p>window.getComputedStyle()</p>
<p>cssObj.getPropertyValue(“key”)</p>
<p>dom.style.setProperty(“key”,value)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box1</span> &#123;</span><br><span class="css">            --x: <span class="hljs-number">0%</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">conic-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-built_in">var</span>(--x), white <span class="hljs-built_in">var</span>(--x) <span class="hljs-number">100%</span>);</span><br><span class="css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        </span><br><span class="css">        <span class="hljs-selector-class">.small-box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: white;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">0.9</span>);</span><br><span class="css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">justify-content</span>: center;</span><br><span class="css">            <span class="hljs-attribute">align-items</span>: center;</span><br><span class="css">            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>0%<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="javascript">            <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">             * <span class="hljs-doctag">@type<span class="hljs-type">&#123;HTMLElement&#125;</span> </span></span></span><br><span class="hljs-comment"><span class="javascript">             * */</span></span><br><span class="javascript"></span><br><span class="javascript">            <span class="hljs-keyword">var</span> box1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box1&quot;</span>);</span><br><span class="javascript">            <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">             * <span class="hljs-doctag">@type<span class="hljs-type">&#123;HTMLElement&#125;</span> </span></span></span><br><span class="hljs-comment"><span class="javascript">             * */</span></span><br><span class="javascript"></span><br><span class="javascript">            <span class="hljs-keyword">var</span> show = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#show&quot;</span>);</span><br><span class="javascript">            <span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box1);</span><br><span class="javascript">            <span class="hljs-keyword">var</span> x = cssObj.getPropertyValue(<span class="hljs-string">&quot;--x&quot;</span>);</span><br><span class="javascript">            x = <span class="hljs-built_in">parseInt</span>(x); <span class="hljs-comment">//去掉%</span></span><br><span class="javascript">            x = x + <span class="hljs-number">1</span>;</span><br><span class="javascript">            x = x &gt; <span class="hljs-number">100</span> ? <span class="hljs-number">0</span> : x</span><br><span class="javascript">            box1.style.setProperty(<span class="hljs-string">&quot;--x&quot;</span>, x + <span class="hljs-string">&quot;%&quot;</span>); <span class="hljs-comment">//重新设置变量</span></span><br><span class="javascript">            show.innerText = x + <span class="hljs-string">&quot;%&quot;</span>;</span><br><span class="javascript">        &#125;, <span class="hljs-number">100</span>)</span><br><span class="javascript">        <span class="hljs-comment">//获取变量x</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613c3ae344eaada739737c42.gif" srcset="/blog/img/loading.gif" lazyload></p>
<hr>
<h3 id="……分界线……"><a href="#……分界线……" class="headerlink" title="……分界线……"></a>……分界线……</h3><h2 id="1-千分位格式数字"><a href="#1-千分位格式数字" class="headerlink" title="1.千分位格式数字"></a>1.千分位格式数字</h2><p>代码一：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;12345678&quot;</span>;<br><span class="hljs-keyword">var</span> str2 = str.replace(<span class="hljs-regexp">/\d&#123;1,3&#125;(?=(\d&#123;3&#125;)+$)/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(p);   <span class="hljs-comment">//p每个匹配的项</span><br>        <span class="hljs-keyword">return</span> p + <span class="hljs-string">&quot;,&quot;</span>;<br>&#125;)<br><span class="hljs-comment">//str2  12,345,678</span><br></code></pre></td></tr></table></figure>

<p>代码二：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;12345678&quot;</span>;<br><span class="hljs-keyword">var</span> str2 = str.replace(<span class="hljs-regexp">/\d&#123;1,3&#125;(?=(\d&#123;3&#125;)+$)/g</span>, <span class="hljs-string">&quot;$&amp;,&quot;</span>); <span class="hljs-comment">//$&amp;  特殊字符序列  $&amp;匹配整个字符串 $2匹配第二组</span><br><span class="hljs-comment">//str2 12,345,678</span><br></code></pre></td></tr></table></figure>

<p>代码三：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//内置方法</span><br><span class="hljs-keyword">var</span> result = (<span class="hljs-number">12345678</span>).toLocaleString(<span class="hljs-string">&quot;en-US&quot;</span>); <br><span class="hljs-comment">//result 12,345,678</span><br></code></pre></td></tr></table></figure>

<h2 id="2-删除相同且相邻的字符"><a href="#2-删除相同且相邻的字符" class="headerlink" title="2.删除相同且相邻的字符"></a>2.删除相同且相邻的字符</h2><p>删除与某个字符相邻且相同的字符，比如 <code>fdaffdaaklfjklja</code> 字符串处理之后成为“<code>fdafdaklfjklja</code>“</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;fdafffdaaklfjklja&quot;</span>;<br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/([a-z])\1+/g</span>;<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    var str2 = str.replace(reg, function (p, g1) &#123;</span><br><span class="hljs-comment">        console.log(p, g1);</span><br><span class="hljs-comment">        return g1;   //返回第一个原子组</span><br><span class="hljs-comment">    &#125;)</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">var</span> str2 = str.replace(reg,<span class="hljs-string">&quot;$1&quot;</span>);   <span class="hljs-comment">//这里的$1相当于上面的g1也就是第一个原子组</span><br></code></pre></td></tr></table></figure>

<h2 id="3-打开电脑摄像头"><a href="#3-打开电脑摄像头" class="headerlink" title="3.打开电脑摄像头"></a>3.打开电脑摄像头</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">openCamera</span>(<span class="hljs-params"></span>) </span>&#123;<br>     navigator.getUserMedia(&#123;<br>         <span class="hljs-attr">video</span>: <span class="hljs-literal">true</span>,   <span class="hljs-comment">//开启视频</span><br>         <span class="hljs-attr">audio</span>: <span class="hljs-literal">false</span>   <span class="hljs-comment">//不开启音频</span><br>     &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">stream</span>) </span>&#123;<br>         <span class="hljs-comment">//v1 video的dom</span><br>         v1.srcObject = stream; <span class="hljs-comment">//将流导入视频播放</span><br>     &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>) </span>&#123;<br>         <span class="hljs-built_in">console</span>.log(err);<br>     &#125;)<br> &#125;<br></code></pre></td></tr></table></figure>

<h3 id="照相并下载图片"><a href="#照相并下载图片" class="headerlink" title="照相并下载图片"></a>照相并下载图片</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">takePhoto</span>(<span class="hljs-params"></span>) </span>&#123;<br>     <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);    <span class="hljs-comment">//c1 是canvas画布</span><br>     ctx.drawImage(v1, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>); <span class="hljs-comment">//在画布中展示  v1是video</span><br>     ctx.fillStyle = <span class="hljs-string">&quot;#ff0000&quot;</span>;<br>     <span class="hljs-comment">// 加水印</span><br>     ctx.fillText(<span class="hljs-string">&quot;拍摄于&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString(), <span class="hljs-number">250</span>, <span class="hljs-number">280</span>);<br>     <span class="hljs-keyword">var</span> base64 = c1.toDataURL(); <span class="hljs-comment">//转base64</span><br>     <span class="hljs-keyword">var</span> a = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;a&quot;</span>);   <span class="hljs-comment">//创建a标签</span><br>     a.href = base64;     <br>     a.download = <span class="hljs-string">&quot;拍照.jpg&quot;</span>;    <span class="hljs-comment">//设置下载内容</span><br>     a.click();      <span class="hljs-comment">//默认点击a标签</span><br><br> &#125;<br></code></pre></td></tr></table></figure>

<h2 id="4-使用FileReader读取文件"><a href="#4-使用FileReader读取文件" class="headerlink" title="4.使用FileReader读取文件"></a>4.使用<code>FileReader</code>读取文件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 使用H5新api</span><br>   <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">previewImg2</span>(<span class="hljs-params">v</span>) </span>&#123;<br>       <span class="hljs-comment">// C:\fakepath\avatar.jpg      ⬅input:file的value</span><br>       <span class="hljs-built_in">console</span>.dir(upFile.files[<span class="hljs-number">0</span>]);<br>       <span class="hljs-keyword">var</span> file = upFile.files[<span class="hljs-number">0</span>];<br><br>       <span class="hljs-comment">// 使用FileReader()</span><br>       <span class="hljs-keyword">var</span> fileReader = <span class="hljs-keyword">new</span> FileReader();<br>       fileReader.readAsDataURL(file);<br>       fileReader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>&#123;<br>           <span class="hljs-comment">//show是img的dom    上传并预览</span><br>           show.src = fileReader.result      <span class="hljs-comment">//result 属性就是得到的base64结果</span><br>       &#125;<br>   &#125;<br></code></pre></td></tr></table></figure>

<h2 id="5-彩色渐变文字"><a href="#5-彩色渐变文字" class="headerlink" title="5.彩色渐变文字"></a>5.彩色渐变文字</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.title-text</span> &#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right, deeppink, darkorange, lightseagreen);<br>    <span class="hljs-attribute">color</span>: transparent;  <span class="hljs-comment">/*关键*/</span><br>    -webkit-<span class="hljs-attribute">background-clip</span>: text;  <span class="hljs-comment">/*关键*/</span><br>    <span class="hljs-attribute">background-repeat</span>: no-repeat;<br>    <span class="hljs-attribute">background-size</span>: <span class="hljs-number">200%</span> <span class="hljs-number">100%</span>;  <span class="hljs-comment">/*关键*/</span><br>    <span class="hljs-attribute">animation</span>: title-text-ani <span class="hljs-number">5s</span> linear infinite;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> title-text-ani &#123;<br>    <span class="hljs-number">0%</span> &#123;<br>        <span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0%</span>;<br>    &#125;<br>    <span class="hljs-number">50%</span> &#123;<br>        <span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">100%</span>;<br>    &#125;<br>    <span class="hljs-number">100%</span> &#123;<br>        <span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0%</span>;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="6-新建Cookie"><a href="#6-新建Cookie" class="headerlink" title="6.新建Cookie"></a>6.新建Cookie</h2><p>新建cookie  userName ,值为你的姓名，过期时间为 2021-9-22 15：00</p>
<p>新建cookie  age ，值为你的年龄，过期时间为当前时间的30分钟以后</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> d1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;2021-9-22 15:00&quot;</span>);<br><span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">&quot;userName = 标哥哥;Expires = &quot;</span> + d1.toGMTString();<br><br><span class="hljs-comment">//-------------------</span><br><br><span class="hljs-keyword">var</span> d2 = <span class="hljs-built_in">Date</span>.now(); <span class="hljs-comment">//拿到当前时间戳</span><br><span class="hljs-keyword">var</span> d3 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(d2 + (<span class="hljs-number">1000</span> * <span class="hljs-number">60</span> * <span class="hljs-number">30</span>)); <span class="hljs-comment">//用当前时间戳去加上30分钟的毫秒数，再得到对象</span><br><span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">&quot;age = 18;Expires = &quot;</span> + d3.toGMTString();<br></code></pre></td></tr></table></figure>

<h2 id="7-地址参数提取"><a href="#7-地址参数提取" class="headerlink" title="7.地址参数提取"></a>7.地址参数提取</h2><p>有这样一段url地址<code>http://item.taobao.com/item.htm?a=1&amp;b=2&amp;c=&amp;d=xxx&amp;e</code>,请写一段 JS 程序提取 URL 中的各个 GET 参数(参数指提是后面的a=1这样的结构,参数名和参数个数不确定)，将其按 key-value 形式返回到一个对象中，如<code>&#123;a:&quot;1&quot;, b:&quot;2&quot;,c:undefined,d:&quot;xxx&quot;,e:undefined&#125;。</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;http://item.taobao.com/item.htm?a=1&amp;b=2&amp;c=&amp;d=xxx&amp;e&quot;</span>;<br><span class="hljs-keyword">var</span> u = <span class="hljs-keyword">new</span> URL(str);<br><span class="hljs-keyword">var</span> obj = &#123;&#125;;<br>u.searchParams.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    obj[index] = item === <span class="hljs-string">&quot;&quot;</span> ? <span class="hljs-literal">undefined</span> : item;<br>&#125;);<br><span class="hljs-built_in">console</span>.log(obj);<br></code></pre></td></tr></table></figure>



<h2 id="8-JQuery表单验证插件jquery-validate的使用"><a href="#8-JQuery表单验证插件jquery-validate的使用" class="headerlink" title="8.JQuery表单验证插件jquery.validate的使用"></a>8.JQuery表单验证插件jquery.validate的使用</h2><p><strong>普通用法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;registerForm&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-item&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;label-box&quot;</span>&gt;</span>学号<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-box&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;txt&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sno&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-comment">&lt;!-- 存放错误信息 --&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;error-msg&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-item&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;label-box&quot;</span>&gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-box&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;txt&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;error-msg&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-item&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn-register&quot;</span>&gt;</span><br>                注册<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//js代码</span><br>$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-keyword">var</span> formvalidate=$(<span class="hljs-string">&quot;#registerForm&quot;</span>).validate(&#123;<br>            <span class="hljs-comment">// 验证规则</span><br>            <span class="hljs-attr">rules</span>:&#123;<br>                <span class="hljs-attr">sno</span>:&#123;<br>                   <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span>,<br>                   <span class="hljs-attr">RegTest</span>:<span class="hljs-string">&quot;^H2103(?!0000)\\d&#123;4&#125;$&quot;</span><br>                &#125;,<br>                <span class="hljs-attr">sex</span>:&#123;<br>                    <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span>,<br>                    <span class="hljs-attr">RegTest</span>:<span class="hljs-string">&quot;^[男女]$&quot;</span><br>                &#125;<br>            &#125;,<br>            <span class="hljs-comment">// 验证不能通过以后的提示信息</span><br>            <span class="hljs-attr">messages</span>:&#123;<br>                <span class="hljs-attr">sno</span>:&#123;<br>                    <span class="hljs-attr">required</span>:<span class="hljs-string">&quot;请输入学号&quot;</span>,<br>                    <span class="hljs-attr">RegTest</span>:<span class="hljs-string">&quot;学号格式不正确&quot;</span><br>                &#125;,<br>                <span class="hljs-attr">sex</span>:&#123;<br>                    <span class="hljs-attr">required</span>:<span class="hljs-string">&quot;请输入性别&quot;</span>,<br>                    <span class="hljs-attr">RegTest</span>:<span class="hljs-string">&quot;性别输入错误&quot;</span><br>                &#125;,<br>          <br>            &#125;,<br>            <span class="hljs-comment">// 验证不能通过的提示信息应该放在哪里</span><br>            <span class="hljs-attr">errorPlacement</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">errorElement,currentElement</span>)</span>&#123;<br>                <span class="hljs-comment">//errorElement代表产生的错误信息的元素 是一个JQuery对象</span><br>                <span class="hljs-comment">//currentElement代表当前表单正在验证的元素 是一个JQuery对象</span><br>                currentElement.parent().next().append(errorElement)<br>            &#125;,<br>            <span class="hljs-attr">errorClass</span>:<span class="hljs-string">&quot;error-tips&quot;</span><br>        &#125;);<br><br>        $(<span class="hljs-string">&quot;#btn-register&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;<br>            <span class="hljs-comment">//验证一下表单里面的规则是否通过</span><br>            <span class="hljs-keyword">if</span>(formvalidate.form())&#123;<br>                alert(<span class="hljs-string">&quot;验证通过&quot;</span>)<br>            &#125;<span class="hljs-keyword">else</span>&#123;<br>                <span class="hljs-comment">// 验证没有通过</span><br><br>            &#125;<br>        &#125;)<br>        <span class="hljs-comment">// 添加自定义验证方法</span><br>        $.validator.addMethod(<span class="hljs-string">&quot;RegTest&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value, element,params</span>) </span>&#123; <span class="hljs-comment">//要验证的值 元素  函数自定义参数</span><br>            <span class="hljs-keyword">var</span> reg=<span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(params);<br>            <span class="hljs-keyword">return</span> reg.test(value);<br>        &#125;, <span class="hljs-string">&quot;请输入正确格式！&quot;</span>);<br>    &#125;);<br></code></pre></td></tr></table></figure>

<hr>
<p><strong>自定义属性的用法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-header&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center text-primary&quot;</span>&gt;</span>添加学生信息<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-horizontal&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;addStuInfo&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>学生姓名<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入学生姓名&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sname&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;学生姓名不能为空&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>学生性别<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ssex&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;男&quot;</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;女&quot;</span>&gt;</span>女<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-comment">&lt;!-- &lt;div class=&quot;col-md-3 tip&quot;&gt;用户名不能为空&lt;/div&gt; --&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>学生年龄<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sage&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入学生年龄&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">data-rule-range</span>=<span class="hljs-string">&quot;[18,65]&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;年龄不能为空&quot;</span> <span class="hljs-attr">data-rule-RegTest</span>=<span class="hljs-string">&quot;^\d+$&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>手机号码<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;stel&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入手机号码&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;手机号不能为空&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-RegTest</span>=<span class="hljs-string">&quot;^(13[0-9]&#123;9&#125;)|(18[0-9]&#123;9&#125;)|(14[0-9]&#123;9&#125;)|(17[0-9]&#123;9&#125;)|(15[0-9]&#123;9&#125;)$&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>所属班级<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;cname&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入所属班级&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;学号不能为空&quot;</span> <span class="hljs-attr">data-rule-RegTest</span>=<span class="hljs-string">&quot;^[HJ]210[1-9]$&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>家庭地址<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;address&quot;</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入家庭地址&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;地址不能为空&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label col-md-2&quot;</span>&gt;</span>爱好<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkbox-inline&quot;</span>&gt;</span><br>                        <span class="hljs-comment">&lt;!-- 复选框组只在第一个添加即可 name要相同 --&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inlineCheckbox1&quot;</span> <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;必须最少选一个爱好&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;看书&quot;</span>&gt;</span> 看书<br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkbox-inline&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inlineCheckbox2&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;睡觉&quot;</span>&gt;</span> 睡觉<br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkbox-inline&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inlineCheckbox3&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;晚游戏&quot;</span>&gt;</span> 玩游戏<br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkbox-inline&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inlineCheckbox4&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;逛街&quot;</span>&gt;</span> 逛街<br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkbox-inline&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;inlineCheckbox5&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;写代码&quot;</span>&gt;</span> 写代码<br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-3 tip&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-md-7 col-md-offset-2&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-primary&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;saveData&quot;</span>&gt;</span>保存数据<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-warning&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;goBack&quot;</span>&gt;</span>返回列表<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>     <span class="hljs-comment">// 表单验证</span><br>     <span class="hljs-keyword">var</span> formvalidate = $(<span class="hljs-string">&quot;#addStuInfo&quot;</span>).validate(&#123;<br>         <span class="hljs-comment">// 验证不能通过的提示信息应该放在哪里</span><br>         <span class="hljs-attr">errorPlacement</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">errorElement, currentElement</span>) </span>&#123;<br>             <span class="hljs-comment">//errorElement代表产生的错误信息的元素 是一个JQuery对象</span><br>             <span class="hljs-comment">//currentElement代表当前表单正在验证的元素 是一个JQuery对象</span><br>             <br>             <span class="hljs-comment">// 多选框结构不同</span><br>             <span class="hljs-keyword">if</span>(currentElement.attr(<span class="hljs-string">&quot;name&quot;</span>)==<span class="hljs-string">&quot;hobby&quot;</span>)&#123;<br>                 currentElement.parent().parent().next().append(errorElement)<br>             &#125;<span class="hljs-keyword">else</span>&#123;<br>                 currentElement.parent().next().append(errorElement)<br>             &#125;<br>         &#125;,<br>         <span class="hljs-attr">errorClass</span>: <span class="hljs-string">&quot;error-tips&quot;</span><br>     &#125;);<br><br>     <span class="hljs-comment">// 检验是否通过 </span><br>     $(<span class="hljs-string">&quot;#saveData&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>         <span class="hljs-comment">//验证一下表单里面的规则是否通过</span><br>         <span class="hljs-keyword">if</span> (formvalidate.form()) &#123;<br>             <span class="hljs-comment">// alert(&quot;验证通过&quot;)</span><br>         &#125; <span class="hljs-keyword">else</span> &#123;<br>             <span class="hljs-comment">// 验证没有通过</span><br>         &#125;<br>     &#125;)<br>     <span class="hljs-comment">// 添加自定义验证方法</span><br>     $.validator.addMethod(<span class="hljs-string">&quot;RegTest&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value, element, params</span>) </span>&#123; <span class="hljs-comment">//要验证的值 元素  函数自定义参数</span><br>         <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(params);<br>         <span class="hljs-keyword">return</span> reg.test(value);<br>     &#125;, <span class="hljs-string">&quot;请输入正确格式！&quot;</span>);<br> &#125;)<br></code></pre></td></tr></table></figure>

<h2 id="9-验证插件自定义方法"><a href="#9-验证插件自定义方法" class="headerlink" title="9. 验证插件自定义方法"></a>9. 验证插件自定义方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$.validator.addMethod(<span class="hljs-string">&quot;gt&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value,element, param</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log($(element));<br>    <span class="hljs-keyword">var</span> oPrice=$(element).parentsUntil(<span class="hljs-string">&quot;#form-addGameInfo&quot;</span>).siblings().find(<span class="hljs-string">&quot;#game_oprice&quot;</span>).val();<br>    oPrice=<span class="hljs-built_in">parseFloat</span>(oPrice)<br>    <span class="hljs-keyword">var</span> fPrice=<span class="hljs-built_in">parseFloat</span>(value)<br>    <span class="hljs-keyword">if</span>(fPrice&gt;oPrice)&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span><br>    &#125;<br>&#125;, <span class="hljs-string">&quot;现价不得高于原价&quot;</span><br>);<br></code></pre></td></tr></table></figure>

<h2 id="10-正则–钱数两位小数"><a href="#10-正则–钱数两位小数" class="headerlink" title="10.正则–钱数两位小数"></a>10.正则–钱数两位小数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">(^(([<span class="hljs-number">1</span>-<span class="hljs-number">9</span>]([<span class="hljs-number">0</span>-<span class="hljs-number">9</span>]+)?)|(<span class="hljs-number">0</span>&#123;<span class="hljs-number">1</span>&#125;))(\.[<span class="hljs-number">0</span>-<span class="hljs-number">9</span>]&#123;<span class="hljs-number">1</span>,<span class="hljs-number">2</span>&#125;)?$)   <span class="hljs-comment">//钱数两位小数</span><br></code></pre></td></tr></table></figure>

<hr>
<h1 id="二、技巧"><a href="#二、技巧" class="headerlink" title="二、技巧"></a>二、技巧</h1><h2 id="1-使用-before追加元素时"><a href="#1-使用-before追加元素时" class="headerlink" title="1.使用::before追加元素时"></a>1.使用::before追加元素时</h2><blockquote>
<p>伪元素为行内元素如果不需要content添加内容的话需要设置为<code>block</code></p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span><span class="hljs-selector-pseudo">::before</span>&#123;<br>         <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;<br>         <span class="hljs-attribute">background-color</span>: chocolate;<br>     	<span class="hljs-comment">/* 伪元素添加的元素为 行内元素 */</span><br>         <span class="hljs-comment">/* 行内元素 不能设置宽高 需要转成 block */</span><br>         <span class="hljs-attribute">display</span>: block;         <br>     &#125;<br></code></pre></td></tr></table></figure>

<h2 id="2-设置导航栏每项的宽度问题"><a href="#2-设置导航栏每项的宽度问题" class="headerlink" title="2.设置导航栏每项的宽度问题"></a>2.设置导航栏每项的宽度问题</h2><ul>
<li>方法一：不设宽度，让子元素中的字撑开宽度</li>
<li>方法二：设置宽度为4em</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 第一种方法 不设置宽度 */</span><br><span class="hljs-comment">/* 第二种方法 设置宽度为四个字 */</span><br><span class="hljs-attribute">width</span>: <span class="hljs-number">4em</span>;<br><span class="hljs-comment">/*最后设置内间距撑开*/</span><br><span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;<br></code></pre></td></tr></table></figure>

<h2 id="3-三段式布局top栏下方两段高度问题"><a href="#3-三段式布局top栏下方两段高度问题" class="headerlink" title="3.三段式布局top栏下方两段高度问题"></a>3.三段式布局top栏下方两段高度问题</h2><blockquote>
<p><strong>不要直接设置高度100%**，fixed是以浏览器为参考高度。实际需要高度为100%-top栏的高度，所以应该使用</strong>定位切割扯开高度**。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-class">.left</span>&#123;<br>    		<span class="hljs-comment">/* 相对无法拉开 绝对定位可以拉开*/</span><br>            <span class="hljs-comment">/* 使用定位切割拉开 */</span><br>            <span class="hljs-attribute">position</span>: fixed;<br>            <span class="hljs-attribute">top</span>: <span class="hljs-number">120px</span>;<br>            <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<br>            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<br>            <span class="hljs-attribute">overflow</span>: auto;<br>            <span class="hljs-attribute">width</span>: <span class="hljs-number">170px</span>;<br>            <span class="hljs-comment">/* 不能设置100% 得用定位切割拉开宽高 */</span><br>            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">rgb</span>(<span class="hljs-number">40</span>, <span class="hljs-number">196</span>, <span class="hljs-number">79</span>);<br>        &#125;<br></code></pre></td></tr></table></figure>

<h2 id="4-浏览器调试技巧"><a href="#4-浏览器调试技巧" class="headerlink" title="4.浏览器调试技巧"></a>4.浏览器调试技巧</h2><p> <a target="_blank" rel="noopener" href="http://www.softeem.xin:8090/archives/%E5%89%8D%E7%AB%AF%E7%A8%8B%E5%BA%8F%E5%91%98%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7">标哥的笔记–浏览器调试技巧1</a></p>
<h2 id="5-href与src的区别"><a href="#5-href与src的区别" class="headerlink" title="5.href与src的区别"></a>5.href与src的区别</h2><blockquote>
<p><strong>href是引用关系，到别人的地盘去，路径以别人为主</strong></p>
</blockquote>
<blockquote>
<p><strong>src是嵌入关系，别人到我这来，路径以自己为主</strong></p>
</blockquote>
<h2 id="6-重要函数知识点"><a href="#6-重要函数知识点" class="headerlink" title="6.重要函数知识点"></a>6.重要函数知识点</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">window</span>.getComputedStyle(dom)   <span class="hljs-comment">//获取所有已经计算的属性</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">cssObj.getPropertyValue(<span class="hljs-string">&quot;key&quot;</span>)  <span class="hljs-comment">//根据属性名获取属性值	  </span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">dom.style.setProperty(<span class="hljs-string">&quot;key&quot;</span>,value)   <span class="hljs-comment">//设置属性名的属性值</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">event.target.matches(选择器) <span class="hljs-comment">//判断当前元素是否被指定的选择器选中 返回true 或false。matches()属于 Element.matches()</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">Object</span>.assign(&#123;&#125;,source);    <span class="hljs-comment">//参数1 目标对象   参数2 源对象  浅拷贝</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">user-select: none;  <span class="hljs-comment">//css不允许选中文字</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">url.searchParams；<span class="hljs-comment">//获取?后的参数</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">DOMContentLoaded   <span class="hljs-comment">//事件 文档加载函数  对应jquery中的 $(function()&#123;&#125;) </span><br></code></pre></td></tr></table></figure>

<h2 id="7-2的513次方-普通数值类型的最大值"><a href="#7-2的513次方-普通数值类型的最大值" class="headerlink" title="7.2的513次方  普通数值类型的最大值"></a>7.2的513次方  普通数值类型的最大值</h2><h2 id="8-键盘键值"><a href="#8-键盘键值" class="headerlink" title="8.键盘键值"></a>8.键盘键值</h2><img src="https://pic.imgdb.cn/item/61ad73542ab3f51d91923645.png" srcset="/blog/img/loading.gif" lazyload style="zoom: 67%;" />

<h2 id="游戏商城小程序的开发记录"><a href="#游戏商城小程序的开发记录" class="headerlink" title="游戏商城小程序的开发记录"></a>游戏商城小程序的开发记录</h2><h3 id="一、样式问题"><a href="#一、样式问题" class="headerlink" title="一、样式问题"></a>一、样式问题</h3><h4 id="1-page样式在微信小程序中不起作用，导致无法撑开页面"><a href="#1-page样式在微信小程序中不起作用，导致无法撑开页面" class="headerlink" title="1.page样式在微信小程序中不起作用，导致无法撑开页面"></a>1.page样式在微信小程序中不起作用，导致无法撑开页面</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* #ifdef MP-WEIXIN */</span><br>page&#123;<br>	<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>&#125;<br><span class="hljs-comment">/* #endif */</span><br></code></pre></td></tr></table></figure>

<p><strong>无论是否条件注释最后渲染到微信小程序中都是如下情况：</strong></p>
<img align="left" src="https://img.imgdb.cn/item/605aa8528322e6675cb212a8.jpg" srcset="/blog/img/loading.gif" lazyload>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*直接改成如下 即可生效*/</span><br>page&#123;<br>    <span class="hljs-attribute">height</span>:<span class="hljs-number">100%</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="二、代码问题"><a href="#二、代码问题" class="headerlink" title="二、代码问题"></a>二、代码问题</h3><h4 id="1-对象分组问题"><a href="#1-对象分组问题" class="headerlink" title="1.对象分组问题"></a>1.对象分组问题</h4><p><strong>在查询多篇文章对应的多张图片(一篇文章有多张图片)时：</strong></p>
<p><img src="https://img.imgdb.cn/item/6064950a8322e6675cda2ac4.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<p><strong>需要对以上的对象按article_id 进行分组，把相同id下的图片放在同一数组中</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//data 需要分组的目标数组   key 分组的条件 关键字</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unique</span>(<span class="hljs-params">data, key</span>) </span>&#123;<br>  <span class="hljs-keyword">let</span> lastData = [];<br>  data.forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">let</span> status = lastData.some(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> value[key] == item[key]);<br>    <span class="hljs-keyword">if</span> (!status) &#123;<br>      <span class="hljs-comment">//在对象中加入数组属性 存放图片链接</span><br>      item.imgs=[]<br>      item.number = <span class="hljs-number">0</span>;<br>      item.imgs.push (item.img_url);<br>      lastData.push(item);<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>      lastData.forEach(<span class="hljs-function">(<span class="hljs-params">value, index</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">if</span> (value[key] === item[key]) &#123;<br>          value.number += <span class="hljs-number">1</span>;<br>          <span class="hljs-comment">// value[&#x27;value&#x27; + value.number] = item.img_url;</span><br>          value.imgs.push(item.img_url)<br>        &#125;<br>      &#125;);<br>    &#125;<br>  &#125;);<br>  <span class="hljs-keyword">return</span> lastData;<br>&#125;<br><br><span class="hljs-comment">//调用</span><br><span class="hljs-keyword">let</span> total_imgs=[]   <span class="hljs-comment">//分好后的数组</span><br><span class="hljs-comment">//对图片数据进行分组  result2原对象数组</span><br>total_imgs=unique(result2,<span class="hljs-string">&quot;article_id&quot;</span>)<br></code></pre></td></tr></table></figure>

<p><strong>分好后的数组</strong></p>
<p><img src="https://img.imgdb.cn/item/6064964c8322e6675cdba473.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<h4 id="2-获取返回的富文本中所有的img标签"><a href="#2-获取返回的富文本中所有的img标签" class="headerlink" title="2.获取返回的富文本中所有的img标签"></a>2.获取返回的富文本中所有的img标签</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> reg=<span class="hljs-regexp">/\&lt;img.*?((data-original=([\&#x27;\&quot;]?([^\&#x27;\&quot;]*)[\&#x27;\&quot;]?))|(src=([\&#x27;\&quot;]?([^\&#x27;\&quot;]*)[\&#x27;\&quot;]?))).*?\/\&gt;/g</span>;<br></code></pre></td></tr></table></figure>



<h3 id="三、数据库"><a href="#三、数据库" class="headerlink" title="三、数据库"></a>三、数据库</h3><h4 id="1-导出字段信息"><a href="#1-导出字段信息" class="headerlink" title="1.导出字段信息"></a>1.导出字段信息</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs mysql">SELECT<br>	COLUMN_NAME 列名,<br> DATA_TYPE 字段类型,<br> CHARACTER_MAXIMUM_LENGTH 长度,<br>	IS_NULLABLE 是否允许为空,<br>	COLUMN_KEY 是否为主键,<br>	COLUMN_COMMENT 字段内容 <br>FROM<br>	INFORMATION_SCHEMA.COLUMNS <br>	WHERE-- springdd为数据库名称，到时候只需要修改成你要导出表结构的数据库名称即可<br>	table_schema = &#x27;graduate_game_mall&#x27; <br>	AND -- user为表名，到时候换成你要导出的表的名称即可<br>-- 如果不写的话，默认会查询出所有表中的数据，这样可能就分不清到底哪些字段是哪张表中的了，所以还是建议写上要导出的表的名称<br>	table_name = &#x27;user_info&#x27;<br></code></pre></td></tr></table></figure>

<h3 id="四、技巧"><a href="#四、技巧" class="headerlink" title="四、技巧"></a>四、技巧</h3><h4 id="1-全局混入"><a href="#1-全局混入" class="headerlink" title="1.全局混入"></a>1.全局混入</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//全局混入，它会把对象里面的内容与所有的组件进行混合</span><br>Vue.mixin(&#123;<br>  <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">return</span> &#123;<br>      <span class="hljs-attr">baseURL</span>:baseURL   <span class="hljs-comment">//baseURL在 public的index.html &lt;script&gt;中引入 为全局变量</span><br>    &#125;<br>  &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<h4 id="2-封装请求API"><a href="#2-封装请求API" class="headerlink" title="2.封装请求API"></a>2.封装请求API</h4><h5 id="axios拦截器"><a href="#axios拦截器" class="headerlink" title="axios拦截器"></a>axios拦截器</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;<br><br><span class="hljs-keyword">const</span> axiosInstance = axios.create(&#123;<br>    <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>,<br>    <span class="hljs-attr">baseURL</span>: baseURL<br>&#125;);<br><br><br><span class="hljs-comment">//axios有一个最重要的一个点就是拦截</span><br><span class="hljs-comment">//这个response称为响应拦截器，每次娄据响应回来，都拦截一下，处理一下</span><br>axiosInstance.interceptors.response.use(<span class="hljs-function"><span class="hljs-params">resp</span> =&gt;</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">      &#123;</span><br><span class="hljs-comment">        status:&quot;success&quot;,</span><br><span class="hljs-comment">        msg:&quot;接口返回的消息&quot;,</span><br><span class="hljs-comment">        data:[]  </span><br><span class="hljs-comment">       &#125;</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">if</span>(resp.data.status==<span class="hljs-string">&quot;success&quot;</span>)&#123;<br>        <span class="hljs-comment">//这里就是真的成功的</span><br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.resolve(resp.data.data);<br>    &#125;<br>    <span class="hljs-keyword">else</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;服务器成功了，但是数据是失败的&quot;</span>,resp.data);<br>        alert(resp.data.msg)<br>    &#125;<br>&#125;, <span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> &#123;<br>    alert(<span class="hljs-string">&quot;请求失败&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(error);<br>&#125;);<br><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> axiosInstance;<br></code></pre></td></tr></table></figure>

<h5 id="使用拦截器发送请求"><a href="#使用拦截器发送请求" class="headerlink" title="使用拦截器发送请求"></a>使用拦截器发送请求</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> axiosInstance <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../axiosInstance&quot;</span>;<br><br><span class="hljs-keyword">const</span> foodInfo = &#123;<br>    <span class="hljs-function"><span class="hljs-title">getListByPage</span>(<span class="hljs-params">&#123; pageIndex, food_name, category_name &#125;</span>)</span> &#123;<br>        <span class="hljs-comment">//拦截器发送get请</span><br>        <span class="hljs-keyword">return</span> axiosInstance.get(<span class="hljs-string">&quot;/foodInfo/getListByPage&quot;</span>, &#123;<br>            <span class="hljs-attr">params</span>: &#123;<br>                pageIndex, food_name, category_name<br>            &#125;<br>        &#125;)<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> foodInfo;<br></code></pre></td></tr></table></figure>

<h5 id="放在Vue的main-js中"><a href="#放在Vue的main-js中" class="headerlink" title="放在Vue的main.js中"></a>放在<code>Vue</code>的main.js中</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//axios拦截器</span><br>axiosInstance.interceptors.request.use(<span class="hljs-function"><span class="hljs-params">config</span> =&gt;</span> &#123;<br>  config.headers.oauth = sessionStorage.getItem(<span class="hljs-string">&quot;token&quot;</span>) || <span class="hljs-string">&quot;&quot;</span>;<br>  <span class="hljs-keyword">return</span> config;<br>&#125;)<br>axiosInstance.interceptors.response.use(<span class="hljs-function"><span class="hljs-params">resp</span> =&gt;</span> &#123;<br>  <span class="hljs-keyword">if</span> (resp.status == <span class="hljs-number">403</span>) &#123;<br>    router.replace(&#123;<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;Login&quot;</span><br>    &#125;)<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-keyword">return</span> resp;<br>  &#125;<br>&#125;, <span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> &#123;<br>  <span class="hljs-keyword">if</span> (error.response) &#123;<br>    <span class="hljs-keyword">if</span> (error.response.status === <span class="hljs-number">401</span>) &#123;<br>      <span class="hljs-comment">// 这种情况一般调到登录页</span><br>      router.replace(&#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;Login&quot;</span><br>      &#125;).then(<span class="hljs-function">()=&gt;</span>&#123;<br>        alert(<span class="hljs-string">&quot;登陆信息已过期，请重新登陆&quot;</span>,<span class="hljs-string">&quot;系统提示&quot;</span>);<br>      &#125;)<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (error.response.status === <span class="hljs-number">403</span>) &#123;<br>      <span class="hljs-comment">// 提示无权限等</span><br>      router.replace(&#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;Login&quot;</span><br>      &#125;).then(<span class="hljs-function">()=&gt;</span>&#123;<br>        alert(<span class="hljs-string">&quot;登陆信息已过期，请重新登陆&quot;</span>);<br>      &#125;)<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>      <span class="hljs-comment">// 其他错误处理</span><br>      alert(<span class="hljs-string">&quot;服务器出错了&quot;</span>);<br>    &#125;<br>  &#125;<br>  <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error.response.data)<br>&#125;);<br>Vue.prototype.$http = axiosInstance;<br></code></pre></td></tr></table></figure>



<h1 id="三、考试错题"><a href="#三、考试错题" class="headerlink" title="三、考试错题"></a>三、考试错题</h1><h2 id="第一次周考2021年7月17日14-59-37-94"><a href="#第一次周考2021年7月17日14-59-37-94" class="headerlink" title="第一次周考2021年7月17日14:59:37 94"></a>第一次周考2021年7月17日14:59:37 94</h2><p><strong>网页中的元素类型</strong></p>
<table>
<thead>
<tr>
<th><em>元素类型</em></th>
<th><strong>块级元素</strong></th>
<th><strong>行内元素</strong></th>
<th><strong>行内块级元素</strong></th>
</tr>
</thead>
<tbody><tr>
<td><em>默认宽高</em></td>
<td>默认宽度100%，有内容撑开高度</td>
<td>由内容撑开宽高</td>
<td>由内容撑开宽高</td>
</tr>
<tr>
<td><em>宽高设置</em></td>
<td>可以设置宽高</td>
<td>不能设置宽高</td>
<td>可以设置宽高</td>
</tr>
<tr>
<td><em>是否换行</em></td>
<td>独占一行</td>
<td>不会换行，代码换行会留有一个字符的空白</td>
<td>不会换行，代码换行会留有一个字符的空白</td>
</tr>
<tr>
<td><em>是否为标准盒子模型</em></td>
<td>是</td>
<td>不是</td>
<td>是</td>
</tr>
<tr>
<td><em><code>margin</code>与<code>padding</code></em></td>
<td>正常</td>
<td>margin左右正常<strong>没有上下</strong>；padding上下左右正常，但是无法撑开父容器</td>
<td>margin，padding正常，但是撑开父容器时底部会留3px空白</td>
</tr>
<tr>
<td><em>左右居中</em></td>
<td><code>margin:auto</code>左右居中</td>
<td>父级块元素或行内块元素设置<code>text-align:center</code>；</td>
<td>父级块元素或行内块元素设置<code>text-align:center</code></td>
</tr>
<tr>
<td><em>垂直居中</em></td>
<td>弹性盒子</td>
<td>父级块元素或行内块元素设置line-height等于自身高度</td>
<td>父级块元素或行内块元素设置line-height等于自身高度</td>
</tr>
</tbody></table>
<p><strong>盒子阴影和文字阴影的区别</strong></p>
<ol>
<li>文字阴影：<code>text-shadow</code>：x轴偏移 y轴偏移 模糊度 颜色 </li>
<li>盒子阴影：<code>box-shadow</code>：x轴偏移 y轴偏移 模糊度 扩散度 颜色 阴影位置 </li>
<li>区别：一个给盒子设置阴影，一个给文字设置阴影，盒子阴影比文字阴影多两个属性值，<strong>盒子阴影可以设置多个</strong></li>
</ol>
<p><strong>常见的伪元素选择器</strong></p>
<p><code> ::first-line</code>，<code>::first-letter</code>，<code>::before/::after</code>  <code>::selection</code>,<code>::placeholder</code></p>
<p><strong>设置表格间距</strong></p>
<blockquote>
<p>默认情况下表格的<code>border-collapse</code>为separate，设置表格间距时最好还是带上</p>
</blockquote>
<p><strong>脱流的影响</strong></p>
<ol>
<li>造成父容器高度坍塌 </li>
<li>浮动脱流默认比标准流高一个z轴层级 </li>
<li>绝对定位脱流默认比浮动脱流要高一个z轴层级 </li>
<li>脱流会造成宽度丢失 </li>
<li>脱流后不再适用标准流中的居中方法</li>
<li><strong>脱流会形成BFC没有<code>margin</code>穿透和重叠的问题</strong></li>
<li><strong>脱流无视元素类型，全都转换成<code>block</code></strong></li>
</ol>
<h2 id="第二次周考2021年7月26日08-51-21-95"><a href="#第二次周考2021年7月26日08-51-21-95" class="headerlink" title="第二次周考2021年7月26日08:51:21 95"></a>第二次周考2021年7月26日08:51:21 95</h2><ol>
<li>开启真3D变换的方式使用的属性是<code>transform-style:preserve-3d</code>  </li>
</ol>
<h2 id="八月二十一周考-2021年9月1日20-47-50"><a href="#八月二十一周考-2021年9月1日20-47-50" class="headerlink" title="八月二十一周考 2021年9月1日20:47:50"></a>八月二十一周考 2021年9月1日20:47:50</h2><p><strong>数组的逗号</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a=[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,,<span class="hljs-number">5</span>,];   <span class="hljs-comment">//W3C标准会忽略最后一个逗号</span><br><span class="hljs-built_in">console</span>.log(a.length)  <span class="hljs-comment">//5    但不会忽略中间的括号</span><br></code></pre></td></tr></table></figure>

<p><strong>双重for循环内层重置外层 导致无限循环</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript">  <br>   <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">5</span>;i++)&#123;<br>       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">2</span>;i++)&#123;   <span class="hljs-comment">//内层需要小于外层  当内层结束时 i==2 到外层后的i也是2 再到内层被重置0 </span><br>           <span class="hljs-built_in">console</span>.log(i)<br>       &#125;<br>   &#125;<br><br><span class="hljs-comment">//如果内层和外面执行次数相同 即 i的判断条件相同  则执行一次就停止 循环</span><br>   <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">5</span>;i++)&#123;<br>       <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">5</span>;i++)&#123;   <br>           <span class="hljs-built_in">console</span>.log(i)<br>       &#125;<br>   &#125;<br></code></pre></td></tr></table></figure>

<p><strong>对象的key值问题</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> 	<span class="hljs-comment">//key值只能为字符串或数字</span><br><span class="hljs-keyword">var</span> a = &#123;<br>   &#125;;<br>   <span class="hljs-keyword">var</span> b = &#123;<br>       <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;b&#x27;</span><br>   &#125;;<br>   <span class="hljs-keyword">var</span> c = &#123;<br>       <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;c&#x27;</span><br>   &#125;;<br>   <span class="hljs-comment">//a[b] b会调用toString方法  得到[object object]</span><br>   a[b] = <span class="hljs-number">123</span>;     <span class="hljs-comment">//key值只能为 字符串或 数字</span><br>   <span class="hljs-comment">//此处得到 a[&quot;[object object]&quot;]=123</span><br>   a[c] = <span class="hljs-number">456</span>;   <span class="hljs-comment">//此处的a[c] c也会调用toString方法  a[&quot;[object object]&quot;]=456</span><br>   <span class="hljs-built_in">console</span>.log(a[b]);    <span class="hljs-comment">//最后结果为456</span><br></code></pre></td></tr></table></figure>

<p><strong>map中回调函数为<code>parseInt</code></strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">  <span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;1&quot;</span>, <span class="hljs-string">&quot;0&quot;</span>, <span class="hljs-string">&quot;1&quot;</span>, <span class="hljs-string">&quot;中&quot;</span>, <span class="hljs-string">&quot;学&quot;</span>];<br>  <span class="hljs-keyword">var</span> result1 = <span class="hljs-built_in">parseInt</span>(arr.join(<span class="hljs-string">&#x27;&#x27;</span>));<br>  <span class="hljs-keyword">var</span> result2 = arr.map(<span class="hljs-built_in">parseInt</span>);    <span class="hljs-comment">//parseInt默认接受两个参数  map会传递三个参数 _arr省略</span><br>  <span class="hljs-comment">//parseInt(item,index)   //1 0   进制   1</span><br>  <span class="hljs-comment">//parseInt(item,index)   //0 1   进制   NaN</span><br>  <span class="hljs-comment">//parseInt(item,index)   //1 2   进制   1</span><br><span class="hljs-comment">//parseInt(item,index)  //中 3   进制  NaN</span><br><br>  <span class="hljs-built_in">console</span>.log(result1); <span class="hljs-comment">//101</span><br>  <span class="hljs-built_in">console</span>.log(result2); <span class="hljs-comment">//1 NaN 1 NaN NaN</span><br></code></pre></td></tr></table></figure>

<h2 id="ES6练习题"><a href="#ES6练习题" class="headerlink" title="ES6练习题"></a>ES6练习题</h2><p>关于数值的扩展，<code>window.isNaN(“abc”)</code> 和<code>Number.isNaN(“abc”)</code>的结果分别是：（  <strong>A</strong> ）</p>
<blockquote>
<p><code>window.isNaN(number)</code>参数会使用Number()方法转换一下，转换后是NaN就是NaN    <code>Number.isNaN(number:unknown)</code>参数为NaN才为true</p>
</blockquote>
<p>A、true  false</p>
<p>B、false  true</p>
<p>C、true  true</p>
<p>D、false  false</p>
<p>module模块中的注意事项，下列说法错误的：（   C  ）</p>
<p>A、除了对象类型以外，导出的属性对外都是只读的    ？  <strong>(对，导出的不能改 相当于 const)</strong></p>
<p>B、导入不存在的变量，值为undefined   <strong>对</strong></p>
<p>C、导入不存在的变量，程序会抛出异常   </p>
<p>D、可以为导入的属性和方法取任意名字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//next(params) params为上个yield 的返回值</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> * <span class="hljs-title">gen</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">let</span> params = <span class="hljs-keyword">yield</span> <span class="hljs-number">2</span>				params=<span class="hljs-number">3</span><br>    <span class="hljs-keyword">let</span> params1 = <span class="hljs-keyword">yield</span> <span class="hljs-number">3</span>  				params1=<span class="hljs-number">1</span>  params2=<span class="hljs-number">7</span>    params3=<span class="hljs-number">4</span><br>    <span class="hljs-keyword">let</span> params2 = <span class="hljs-keyword">yield</span> params1 + <span class="hljs-number">6</span><br>    <span class="hljs-keyword">let</span> params3 = <span class="hljs-keyword">yield</span> <span class="hljs-number">7</span><br>    <span class="hljs-keyword">return</span> params2 * params + params3<br>&#125;<br><span class="hljs-keyword">let</span> lt = gen();<br><span class="hljs-built_in">console</span>.log(lt.next());  <span class="hljs-comment">//2    &#123;value:2,done:false&#125;</span><br><span class="hljs-built_in">console</span>.log(lt.next(<span class="hljs-number">3</span>)); <span class="hljs-comment">//3	&#123;value:3,done:false&#125; </span><br><span class="hljs-built_in">console</span>.log(lt.next(lt.next(<span class="hljs-number">1</span>).value);  <span class="hljs-comment">//7</span><br><span class="hljs-built_in">console</span>.log(lt.next(<span class="hljs-number">4</span>)); <span class="hljs-comment">//25	</span><br></code></pre></td></tr></table></figure>




            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/MySQL/">MySQL</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Vue/">Vue</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/12/06/%E5%AE%BF%E8%88%8D%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">宿舍管理系统开发笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
